#@adminLayout() #define main()
<link href="#(ctx)/static/ajax/libs/jquery-ztree/3.5/css/metro/zTreeStyle.css" rel="stylesheet"/>
<script src="#(ctx)/static/ajax/libs/jquery-ztree/3.5/js/jquery.ztree.all-3.5.js"></script>

<style type="text/css">
.search-collapse1
{
	width: 100%;
    background: #fff;
    border-radius: 6px;
    margin-top: 10px;
    padding-top: 5px;
    padding-bottom: 13px;
    box-shadow: 1px 1px 3px rgb(0 0 0 / 20%);
}
</style>
<body class="gray-bg">
	<div class="ui-layout-west">
		<div class="container-div">
			<div class="row">
				<div class="col-sm-12 search-collapse1" id="searchbar">
					<form id="user-formPost">
						<div class="select-list">
							<ul> 
								<li>
									产权：
									<select name="c_pro" id="c_pro" onchange="changeInfo()" >
					           		  #for(data: getOrgInfo(c_pro))
					           		 	<option value="#(data.ccode)">#(data.cname)</option>
					           		  #end
					           		 </select>
								</li>
		                        <li>
		                     		 组名：<input type="text" name="cname" style="width:120px;"/>
									
		                        </li>
		                        
		                        <li>
		                            <a class="btn btn-primary btn-rounded btn-sm" onclick="$.table.search('user-formPost','bootstrap-post')"><i class="fa fa-search"></i>&nbsp;搜索</a>
		                            <a class="btn btn-warning btn-rounded btn-sm" onclick="$.form.reset('user-formPost','bootstrap-post')"><i class="fa fa-refresh"></i>&nbsp;重置</a>
		                        </li>
							</ul>
						</div>
					</form>
				</div>
				
		        <div class="col-sm-12 select-table table-bordered">
				    <table id="bootstrap-post" data-mobile-responsive="true"></table>
				</div>
			</div>
		</div>
	</div>
	
	<div class="ui-layout-center">
		<div class="container-div">
			<div class="box box-main">
				<div class="box-header">
					<div class="box-title">
						<i class="fa icon-grid"></i>菜单目录  <span id="roleName"></span>
					</div>
					<div class="box-tools pull-right">
					    <a class="btn btn-success disabled" onclick="addMenu()" id="btn_add">
		                	保存菜单权限 
		            	</a>
		            	<input type="hidden" name="ccode" id="hf_ccode"/>
						<button type="button" class="btn btn-box-tool" id="btnExpand" title="展开" style="display:none;"><i class="fa fa-chevron-up"></i></button>
						<button type="button" class="btn btn-box-tool" id="btnCollapse" title="折叠"><i class="fa fa-chevron-down"></i></button>
						<button type="button" class="btn btn-box-tool" id="btnRefresh" title="刷新栏目"><i class="fa fa-refresh"></i></button>
					</div>
				</div>
				<div class="ui-layout-content">
					<ul id="tree" class="ztree"></ul>
				</div>
			</div>
		</div>
	</div>
	
	<script type="text/javascript">
		var prefix = "#(ctx)/sysmenu";
		
		$(function() {
			var panehHidden = false;
		    var west__size=450;
		    if ($(this).width() < 769) {
				panehHidden = true;
		    }
		    $('body').layout({ initClosed: panehHidden, west__size: west__size });

		    queryPost();
		    
			
		});
		
		function queryPost() {
		    var options = {
		    	id:'bootstrap-post',
		    	toolbar:'toolpost',
		        url: "#(ctx)/syspost/list",
	            uniqueId: "ccode",
	            sortName: "cname",
	            sortOrder: "asc",
	            modalName: "岗位组",
                showSearch: false,
                showRefresh: false,
                showColumns: false,
                showToggle: false,
	            columns: [{
						title: '序号',//标题  可不加,
	                    width:'50px',
						formatter: function (value, row, index) {
							return index+1;
						}
	             },
                {
                    field: 'ccode',
                    title: '岗位编码',
                    width:'70px'
                },
				{
                    field: 'cname',
                    title: '岗位名称',
                    width: '100px'
                },
                {
                    title: '操作',
                    align: 'center',
                    width: '60px',
                    formatter: function(value, row, index) {
                        var actions = [];
                        actions.push('<a class="btn btn-success btn-xs " href="javascript:void(0)" onclick="loadMenu(\'' + row.ccode + '\',\'' + row.cname + '\')"><i class="fa fa-edit"></i> 权限</a> ');
                        return actions.join('');
                    }
                },]
		    };
		    $.table.init(options);
			
		    $("#bootstrap-post").colResizable({
				liveDrag:true, 
				gripInnerHtml:"<div class='grip'></div>", 
				draggingClass:"dragging", 
	            resizeMode:'overflow'
	        });
		}
		
		
		function loadMenu(ccode,cname)
		{
			$('#hf_ccode').val(ccode);
			$('#roleName').text("---"+cname);
			$('#btn_add').removeClass('disabled')
			queryTree(ccode);
		}
		
		function queryTree(cpost)
		{
			var url = prefix+"/authtree?cpost="+cpost;
			var options = {
                id: "tree",  
		        url: url,
		        check: { enable: true },
		        expandLevel: 5,
				data: {
					 key: {
                         name: "menuName"         // 节点数据保存节点提示信息的属性名称
                     },
		    		simpleData: {
		    			enable: true,
		    			idKey: "id",
		    			pIdKey: "pid"
		    		}
				}
		    };
			$.tree.init(options);

			function zOnClick(event, treeId, treeNode) {
				
			}
		}
		
		//添加菜单信息
		function addMenu()
		{
			var menuIds = $.tree.getCheckedNodes();
			
			$.modal.confirm("确定添加权限到当前组吗？", function() {
				var cpost = $('#hf_ccode').val();
				var data = {"menuIds": menuIds,"cpost":cpost};
	        	$.operate.submit(prefix+"/addtree", "post", "json", data);
			});
		}
		

		$('#btnExpand').click(function() {
			$._tree.expandAll(true);
		    $(this).hide();
		    $('#btnCollapse').show();
		});
		
		$('#btnCollapse').click(function() {
			$._tree.expandAll(false);
		    $(this).hide();
		    $('#btnExpand').show();
		});
		
		$('#btnRefresh').click(function() {
			queryTree();
			$('#hf_ccode').val();
			$('#roleName').text();
			$('#btn_add').addClass('disabled')
		});

		function changeInfo()
		{
			queryTree('NAAAA');
			$('#btn_add').addClass('disabled')
			$.table.search('user-formPost','bootstrap-post')
		}
	</script>
</body>
#end